<template>
  <div class="flex-main">
    <div class="flex-body">
      <div class="m-evaluate-head">
        <img src="@/assets/images/my.png" alt>
        <ul>
          <li v-for="(item,index) in evaluatetype" :key="index" @click="chooseType(index)">
            <i :class="{'on':typeidx==index}"></i>
            {{item.text}}
          </li>
        </ul>
      </div>
      <textarea name id placeholder="为了下次给您最好的服务，请留下您的宝贵意见" class="m-textarea" v-model="evaluation_content"></textarea>

      <div class="m-stars-evaluate">
        <p class="m-evaluat-tit">
          <img src="@/assets/images/flower-icon@2x.png" width="16">
          快速评价
        </p>
        <ul>
          <li v-for="(item,index) in dataLevel" :key="index">
            <span>{{item.text}}</span>
            <div>
                <i v-for="(level,idx) in item.starnum" :key="idx" 
                :class="{'stared':level==1}"
                @click="chooseStar(index,idx)"></i>
            </div>
          </li>
        </ul>
      </div>

      <div align="center">
          <button class="m-refer-btn" @click="referBtn">发表评价</button>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import {mapState,mapMutations,mapActions} from 'vuex';
import {submitOrderdetail,evaluationSave} from '@/api/mine';
export default {
  name: "",
  data() {
    return {
      evaluatetype: [
        { text: "好评", type: 1, typeIcon: "m-nice" },
        { text: "中评", type: 2, typeIcon: "m-good" },
        { text: "差评", type: 3, typeIcon: "m-bad" }
      ],
      typeidx: 0,
    //   ServiceScore  PointScore  ProScore  DesScore
      dataLevel:[
          { text: "服务水平", name: "ServiceScore",starnum:[0,0,0,0,0],level:0 }, 
          { text: "技师水平", name: "PointScore",starnum:[0,0,0,0,0],level:0 }, 
          { text: "项目效果", name: "ProScore",starnum:[0,0,0,0,0],level:0 }],
      dataLevel2:[
          { text: "描述相符", name: "DesScore",starnum:[0,0,0,0,0],level:0 },
        ],
      sourceFrom:0,   //消费来源 0商城购买（wx_order） , 1 erp购买（SS_Consume）
      order_id:'',    //订单id
      evaluation_status:1,      //评价状态 ： 1:好评 ；2中评 ； 3差评
      evaluation_content:'',    //评价内容
      orderlist:[],           //商品列表
    };
  },
  computed:{
        ...mapState({
            buydata:state=>state.projectBuydata.buydata,
        })
    },
  methods: {
    //   选择评价类型
    chooseType(index) {
      this.typeidx = index;
      this.evaluation_status = index+1;
    },
    // 星级评价
    chooseStar(levelidx,index) {
        let starnum = this.dataLevel[levelidx].starnum;
        this.dataLevel[levelidx].level = index+1;     //星级数
        for(let i=0; i<=index; i++) {
            // starnum[i]=1;
            Vue.set(this.dataLevel[levelidx].starnum,i, 1)
        }
        for(let i=index+1; i<starnum.length; i++) {
            // starnum[i]=0;
            Vue.set(this.dataLevel[levelidx].starnum,i, 0)
        }
    },
    // 发表评价事件
    referBtn() {
        let that = this;
        let dataLevel_name = {};
        for (const key in that.dataLevel) {
          if(that.dataLevel[key].level==0){
            that.$toast('请选择星级评价');
            return;
          }
          dataLevel_name[that.dataLevel[key].name] = that.dataLevel[key].level;
        }
        let evaluation_content = that.evaluation_content;
        if(evaluation_content==''){
          that.$toast('请填写评价内容');
          return false;
        }
        console.log(this.order_id);

        let param = Object.assign({     //结合上面整合的dataLevel_name
          evaluation_status:that.evaluation_status,     //评价等级
          evaluation_content:evaluation_content,   //评价内容
          customer_id:that.$utils.uid,    //用户id
          order_id:that.order_id || '',       //订单id
          sourceFrom:that.sourceFrom,   //消费来源
        },dataLevel_name);
        evaluationSave(param).then(result=>{
          that.$toast('评价提交成功');
          that.$router.go(-1);    //返回上一页
        }).catch(err=>{

        })
    }
  },
  mounted() {
    let order_id = this.$route.query.order_id;
    let sourceFrom = this.$route.query.sourceFrom;
    this.order_id = order_id;
    this.sourceFrom = sourceFrom;
    let buydata = this.buydata;
    let that = this;
    let param = {
      customer_id:that.$utils.uid,
      buydata:JSON.stringify(buydata)
    }
    submitOrderdetail(param).then((result) => {   //通过buydata获取订单详情
      let list = result.list;
      that.orderlist = list;
      let list_len = list.length;
      let goods_num = 0;  //订单包含产品的个数
      let goods_has = false;    //是否包含产品
      for (const key in list) {
        if(list[key].type==2){    //包含产品类型的订单
          goods_num ++ ;
          goods_has = true;   //只要有产品，则为true
          if(list_len==1){        //只有一个产品的订单
            that.dataLevel = that.dataLevel2;
          }
        }
      }
      if(goods_num==list_len) {   //都是产品的订单
         that.dataLevel = that.dataLevel2;
      }
      if(goods_num>0 && goods_has) {    //除了产品还有其他类型的
        that.dataLevel = that.dataLevel + that.dataLevel2;
      }
    }).catch((err) => {
      
    });
  }

};
</script>
<style lang="less" scoped src="@/less/mine/addEvaluation.less"></style>
